<template>
  <div class="add" style="position: fixed; top: 0; width: 100%; height: 2000px; background: whitesmoke">
    <div style="width: 100%;height: 55px;background: white;display: flex" @click="fanhui">
      <div style="font-family: 'Avenir';font-size: 20px;margin: 13px 0 0 0px;width: 10%;"><van-icon name="arrow-left" /></div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 12px 0 0 0px;width: 80%;">{{$t('main.Language')}}</div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 13px 0 0 0px;width: 10%;"></div>
    </div>
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 10px" @click="chinaChange" >
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 15px;width: 85%;display: flex">{{$t('main.Chinese')}}</div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 12px 0 0 0px;width: 15%" v-if="china">
        <div style="color: #51b8ff;font-size: 20px" >
          ✔
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 1.5px" @click="englishChange">
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 15px;width: 85%;display: flex">{{$t('main.English')}}</div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 12px 0 0 0px;width: 15%" v-if="english" >
        <div style="color: #51b8ff;font-size: 20px" >
          ✔
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 1.5px" click="fChina" @click="fChangeChange">
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 15px;width: 85%;display: flex">{{ $t('main.Traditional') }}</div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 12px 0 0 0px;width: 15%">
        <div style="color: #51b8ff;font-size: 20px" v-if="fChina" >
          ✔
        </div>
      </div>
    </div>


  </div>

</template>

<script>

export default {
  data() {
    return {
      china:true,
      fChina:false,
      english:false,
      language: localStorage.getItem("lang") ||"zh",

    };
  },
  created() {
    this.open()
  },
  methods: {
    open(){
      if(this.$i18n.locale == 'zn'){
        this.china=true
        this.fChina=false
        this.english=false
      }else{
        this.china=false
        this.fChina=false
        this.english=true
      }
    },
    chinaChange(){
     this.china=true
     this.fChina=false
     this.english=false
      this.$i18n.locale = 'zn'
    },
    englishChange(){
      this.china=false
      this.fChina=false
      this.english=true
      this.$i18n.locale = 'en'
    },
    fChangeChange(){
      this.china=false
      this.fChina=true
      this.english=false
    },
    fanhui() {
      this.$router.push('/setup')
    },
  }
}

</script>

<style scoped>

</style>





